<template>
  <div>
    <div class="mxgl">
      <div class="tabs">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="数据模型管理" name="first">
            <div v-if="!showModel" class="tree-left">
              <el-input
                placeholder="输入关键字进行过滤"
                suffix-icon="el-icon-search"
                v-model="filterText"
              >
              </el-input>
              <el-tree
                class="filter-tree"
                :data="treeData"
                :props="defaultProps"
                @node-click="treeFn"
                default-expand-all
                :filter-node-method="filterNode"
                ref="tree"
              >
              </el-tree>
            </div>
            <div v-if="!showModel" class="table-right">
              <div class="search">
                <el-input
                  class="search-input"
                  v-model="searchInput"
                  placeholder="请输入名称"
                ></el-input>
                <el-button class="el-btn" type="primary" @click="searchList"
                  >查询</el-button
                >
                <el-button class="add-btn" @click="fnAdd" type="primary"
                  >新增</el-button
                >
              </div>
              <div class="el-table">
                <el-table
                  :data="tableData"
                  stripe
                  style="width: 100%"
                  max-height="700px"
                >
                  <!-- <el-table-column prop="xh" label="序号"> </el-table-column> -->
                  <el-table-column prop="name" label="名称"> </el-table-column>
                  <el-table-column prop="status" label="状态">
                  </el-table-column>
                  <el-table-column prop="tj" label="模型统计">
                  </el-table-column>
                  <el-table-column prop="ren" label="创建人"> </el-table-column>
                  <el-table-column prop="cjtime" width="180" label="创建时间">
                  </el-table-column>
                  <el-table-column prop="xgtime" width="180" label="修改时间">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                      <!-- 编辑 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="编辑"
                        placement="bottom"
                      >
                        <span
                          style="
                            display: inline-block;
                            margin-right: 20px;
                            color: #409eff;
                          "
                          @click="handleEdit(scope.$index, scope.row, 0)"
                        >
                          <i class="el-icon-edit"></i
                        ></span>
                      </el-tooltip>

                      <!-- 查看 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="查看"
                        placement="bottom"
                      >
                        <span
                          style="
                            display: inline-block;
                            margin-right: 20px;
                            color: #409eff;
                          "
                          @click="handleEdit(scope.$index, scope.row, 1)"
                        >
                          <i class="el-icon-view"></i
                        ></span>
                      </el-tooltip>
                      <!-- 删除 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="bottom"
                      >
                        <span
                          style="color: #409eff"
                          @click="handleEdit(scope.$index, scope.row, 2)"
                        >
                          <i class="el-icon-delete"></i
                        ></span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </div>
            <DomNode
              @fn="getParentIsAdd"
              v-if="showModel"
              :actionTag="action"
              :dataNum="dataNum"
            ></DomNode>
          </el-tab-pane>
          <el-tab-pane label="元数据模型管理" name="second">
            <div class="sjgl">
              <div class="search" v-if="!isEditOrAdd">
                <el-input
                  class="search-input"
                  v-model="sjglInput"
                  placeholder="请输入名称"
                ></el-input>
                <el-button class="el-btn" type="primary" @click="seachsjgl"
                  >查询</el-button
                >
                <el-button class="add-btn" type="primary" @click="addForm"
                  >新增</el-button
                >
              </div>
              <div class="el-table" v-if="!isEditOrAdd">
                <el-table
                  :data="sjglTableData"
                  stripe
                  style="width: 100%"
                  max-height="700px"
                >
                  <el-table-column prop="xh" label="序号"> </el-table-column>
                  <el-table-column prop="bm" label="编码"> </el-table-column>
                  <el-table-column prop="zdlx" label="字段类型">
                  </el-table-column>
                  <el-table-column prop="name" label="名称"> </el-table-column>
                  <el-table-column prop="mxlx" label="模型类型">
                  </el-table-column>
                  <el-table-column prop="chaxun" label="是否支持查询">
                    <template slot-scope="scope" style="text-align: center">
                      <el-checkbox v-model="scope.row.chaxun"></el-checkbox>
                    </template>
                  </el-table-column>
                  <el-table-column prop="cjtime" label="创建时间" width="180">
                  </el-table-column>
                  <el-table-column prop="xgtime" label="修改时间" width="180">
                  </el-table-column>
                  <el-table-column fixed="right" label="操作" width="150">
                    <template slot-scope="scope">
                      <!-- 编辑 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="编辑"
                        placement="bottom"
                      >
                        <span
                          style="
                            display: inline-block;
                            margin-right: 20px;
                            color: #409eff;
                          "
                          @click="editFn(scope.row.xh)"
                        >
                          <i class="el-icon-edit"></i
                        ></span>
                      </el-tooltip>

                      <!-- 查看 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="查看"
                        placement="bottom"
                      >
                        <span
                          style="
                            display: inline-block;
                            margin-right: 20px;
                            color: #409eff;
                          "
                          @click="xxFN(scope.row)"
                        >
                          <i class="el-icon-view"></i
                        ></span>
                      </el-tooltip>
                      <!-- 删除 -->
                      <el-tooltip
                        class="item"
                        effect="dark"
                        content="删除"
                        placement="bottom"
                      >
                        <span
                          style="color: #409eff"
                          @click="delSSTable(scope.row.xh)"
                        >
                          <i class="el-icon-delete"></i
                        ></span>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                </el-table>
              </div>
              <!-- 元数据模型新建、编辑、查看页面 -->
              <div v-if="isEditOrAdd" class="y-add">
                <div @click="isEditOrAdd = false">
                  <i class="el-icon-back"></i>
                </div>
                <div style="margin-left: 30px; margin-bottom: 15px">
                  <span style="font-size: 14px; font-weight: bold">
                    属性类型：</span
                  >
                  <el-radio :disabled="isdisAble" v-model="form.lx" label="1"
                    >公有属性</el-radio
                  >
                  <el-radio :disabled="isdisAble" v-model="form.lx" label="2"
                    >扩展属性</el-radio
                  >
                  <el-radio :disabled="isdisAble" v-model="form.lx" label="3"
                    >私有属性</el-radio
                  >
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      margin-left: 200px;
                    "
                  >
                    是否可空：</span
                  >
                  <el-checkbox
                    :disabled="isdisAble"
                    v-model="form.chaxun"
                  ></el-checkbox>
                </div>
                <div class="inp" style="margin-left: 30px; margin-bottom: 15px">
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      padding-left: 26px;
                    "
                    >编码：</span
                  >
                  <el-input
                    style="width: 80%"
                    placeholder="请输入编码"
                    size="mini"
                    :disabled="isdisAble"
                    v-model="form.bm"
                    clearable
                  >
                  </el-input>
                </div>
                <div class="inp" style="margin-left: 30px; margin-bottom: 15px">
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      padding-left: 26px;
                    "
                    >名称：</span
                  >
                  <el-input
                    style="width: 80%"
                    placeholder="请输入名称"
                    size="mini"
                    v-model="form.name"
                    clearable
                    :disabled="isdisAble"
                  >
                  </el-input>
                </div>
                <div class="inp" style="margin-left: 30px; margin-bottom: 15px">
                  <span style="font-size: 14px; font-weight: bold"
                    >字段类型：</span
                  >
                  <el-select
                    v-model="form.zdlx"
                    placeholder="请选择字段类型"
                    size="mini"
                    style="width: 80%"
                    :disabled="isdisAble"
                  >
                    <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    >
                    </el-option>
                  </el-select>
                </div>
                <div class="inp" style="margin-left: 30px; margin-bottom: 15px">
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      padding-left: 26px;
                    "
                    >长度：</span
                  >
                  <el-input
                    :disabled="isdisAble"
                    style="width: 80%"
                    placeholder="请输入长度"
                    size="mini"
                    v-model="form.cd"
                    clearable
                  >
                  </el-input>
                </div>
                <div class="inp" style="margin-left: 30px; margin-bottom: 15px">
                  <span style="font-size: 14px; font-weight: bold"
                    >关联维度：</span
                  >
                  <el-input
                    :disabled="isdisAble"
                    style="width: 80%"
                    placeholder="请输入关联维度"
                    size="mini"
                    v-model="form.glwd"
                    clearable
                  >
                  </el-input>
                </div>
                <div class="inp" style="margin-left: 30px; margin-bottom: 15px">
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      padding-left: 26px;
                    "
                    >排序：</span
                  >
                  <el-input
                    :disabled="isdisAble"
                    style="width: 80%"
                    placeholder="请输入排序"
                    size="mini"
                    v-model="form.px"
                    clearable
                  >
                  </el-input>
                </div>
                <div
                  class="inp"
                  style="margin-left: 30px; margin-bottom: 15px; width: 80%"
                >
                  <span
                    style="
                      font-size: 14px;
                      font-weight: bold;
                      padding-left: 26px;
                      vertical-align: top;
                    "
                    >备注：</span
                  >
                  <el-input
                    :disabled="isdisAble"
                    type="textarea"
                    :rows="8"
                    style="width: 90%"
                    placeholder="请输入备注"
                    size="mini"
                    v-model="form.bz"
                    clearable
                  >
                  </el-input>
                </div>
                <div
                  style="clear: both; text-align: center; padding-top: 120px"
                >
                  <el-button
                    type="primary"
                    :disabled="isdisAble"
                    @click="addBtn"
                    >确定</el-button
                  >
                  <el-button type="info" plain @click="quxiao">取消</el-button>
                </div>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </div>
</template>

<script>
import DomNode from "../../../DomNode.vue";

export default {
  data() {
    return {
      form: {
        lx: "2",
        chaxun: true,
        bm: "",
        name: "",
        zdlx: "",
        cd: "",
        glwd: "",
        px: "",
        bz: "",
        mxlx: "元模型",
        cjtime: "2022-02-20 11:07:30",
        xgtime: "2022-02-20 11:07:30",
      },
      options: [
        { label: "字符串", value: "字符串" },
        { label: "整数", value: "整数" },
      ],
      isdisAble: false,
      showModel: false, //是否新增
      isBJ: false,
      bjid: "",
      isEditOrAdd: false, //原数据新增删除
      filterText: "", //筛选条件
      activeName: "first", //模型管理顶部tab切换
      searchInput: "", //表格查询
      sjglInput: "", //数据模型查询
      defaultProps: {
        children: "children",
        label: "label",
      }, //默认节点加载
      treeData: [
        {
          label: "我的目录",
          children: [
            {
              label: "lxn",
              children: [
                {
                  label: "stage",
                  children: [
                    {
                      label: "资源",
                    },
                    {
                      label: "模型",
                    },
                  ],
                },
              ],
            },
          ],
        },
      ], //树形结构tree
      tableData: [
        {
          xh: 1,
          name: "1_ss",
          status: "已提交",
          tj: "1",
          ren: "张三",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 1,
        },
        {
          xh: 2,
          name: "2_ss",
          status: "已提交",
          tj: "1",
          ren: "李四",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 1,
        },
        {
          xh: 3,
          name: "3_ss",
          status: "已提交",
          tj: "1",
          ren: "王五",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 2,
        },
        {
          xh: 4,
          name: "4_ss",
          status: "已提交",
          tj: "1",
          ren: "张六",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 2,
        },
      ],
      MrtableData: [
        {
          xh: 1,
          name: "1_ss",
          status: "已提交",
          tj: "1",
          ren: "张三",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 1,
        },
        {
          xh: 2,
          name: "2_ss",
          status: "已提交",
          tj: "1",
          ren: "李四",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 1,
        },
        {
          xh: 3,
          name: "3_ss",
          status: "已提交",
          tj: "1",
          ren: "王五",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 2,
        },
        {
          xh: 4,
          name: "4_ss",
          status: "已提交",
          tj: "1",
          ren: "张六",
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: 2,
        },
      ],
      MrsjglTableData: [
        {
          xh: 1,
          bm: "meta_enti",
          name: "数据库资源",
          zdlx: "字符串",
          mxlx: "元模型",
          chaxun: true,
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: "1",
          cd: 100,
          glwd: "",
          px: "",
          bz: "",
        },
        {
          xh: 2,
          bm: "meta_progle",
          name: "表",
          zdlx: "整数",
          mxlx: "元模型",
          chaxun: false,
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: "1",
          cd: 100,
          glwd: "",
          px: "",
          bz: "",
        },
        {
          xh: 3,
          bm: "meta_resoure",
          name: "FTP资源",
          zdlx: "字符串",
          mxlx: "元模型",
          chaxun: true,
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: "1",
          cd: 100,
          glwd: "",
          px: "",
          bz: "",
        },
      ],
      sjglTableData: [
        {
          xh: 1,
          bm: "meta_enti",
          name: "数据库资源",
          zdlx: "字符串",
          mxlx: "元模型",
          chaxun: true,
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: "1",
          cd: 100,
          glwd: "",
          px: "",
          bz: "",
        },
        {
          xh: 2,
          bm: "meta_progle",
          name: "表",
          zdlx: "整数",
          mxlx: "元模型",
          chaxun: false,
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: "1",
          cd: 100,
          glwd: "",
          px: "",
          bz: "",
        },
        {
          xh: 3,
          bm: "meta_resoure",
          name: "FTP资源",
          zdlx: "字符串",
          mxlx: "元模型",
          chaxun: true,
          cjtime: "2022-02-20 11:07:30",
          xgtime: "2022-02-20 11:07:30",
          lx: "1",
          cd: 100,
          glwd: "",
          px: "",
          bz: "",
        },
      ],
      dataNum: "", //向子组件传递的参数
      action: "",
    };
  },
  components: {
    DomNode,
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  beforeDestroy() {
    this.handleClick();
  },
  mounted() {},
  methods: {
    // 接收子组件参数，控制显隐
    getParentIsAdd(data) {
      this.showModel = data;
    },
    // 数据模型新建点击事件
    fnAdd() {
      this.action = "add";
      this.dataNum = "";
      this.showModel = true;
    },
    xxFN() {
      this.isdisAble = true;
      this.isEditOrAdd = true;
      this.isBJ = false;
    },
    quxiao() {
      this.isdisAble = false;
      this.isEditOrAdd = false;
      this.isBJ = false;
    },
    editFn(xh) {
      this.MrsjglTableData.forEach((res, index) => {
        if (res.xh == xh) {
          this.bjid = index;
          this.form = {};
          this.form = {
            xh: xh,
            lx: this.MrsjglTableData[index].lx,
            chaxun: this.MrsjglTableData[index].chaxun,
            bm: this.MrsjglTableData[index].bm,
            name: this.MrsjglTableData[index].name,
            zdlx: this.MrsjglTableData[index].zdlx,
            cd: this.MrsjglTableData[index].cd,
            glwd: this.MrsjglTableData[index].glwd,
            px: this.MrsjglTableData[index].px,
            bz: this.MrsjglTableData[index].bz,
            mxlx: this.MrsjglTableData[index].mxlx,
            cjtime: this.MrsjglTableData[index].cjtime,
            xgtime: this.MrsjglTableData[index].xgtime,
          };
        }
      });
      this.isEditOrAdd = true;
      this.isBJ = true;
    },
    addForm() {
      this.form = {
        lx: "2",
        chaxun: true,
        bm: "",
        name: "",
        zdlx: "",
        cd: "",
        glwd: "",
        px: "",
        bz: "",
        mxlx: "元模型",
        cjtime: "2022-02-20 11:07:30",
        xgtime: "2022-02-20 11:07:30",
      };
      this.isdisAble = false;
      this.isEditOrAdd = true;
    },
    addBtn() {
      if (this.isBJ) {
        this.isBJ = false;
        let obj = this.form;
        this.MrsjglTableData.splice(this.bjid, 1, obj);
        this.isEditOrAdd = false;
        this.$message({
          showClose: true,
          message: "修改成功",
          type: "success",
        });
      } else {
        let obj = {};
        obj = this.form;
        let index = this.MrsjglTableData[this.MrsjglTableData.length - 1].xh;
        obj.xh = Number(index + 1);
        this.MrsjglTableData.push(obj);
        this.isEditOrAdd = false;
        this.$message({
          showClose: true,
          message: "添加成功",
          type: "success",
        });
      }
      // this.seachsjgl();
    },
    handleClick() {
      this.searchInput = ""; //表格查询
      this.sjglInput = ""; //数据模型查询
      this.filterText = ""; //筛选条件
      this.isdisAble = false;
      this.isEditOrAdd = false;
      this.isBJ = false;
    },
    //tree过滤
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    searchList() {
      this.tableData = this.MrtableData;
      if (this.searchInput != "") {
        var reg = new RegExp(this.searchInput);
        let arr = [];
        for (var i = 0; i < this.tableData.length; i++) {
          if (reg.test(this.tableData[i].name)) {
            arr.push(this.tableData[i]);
          }
        }
        this.tableData = arr;
      }
      this.$message({
        showClose: true,
        message: "查询成功",
        type: "success",
      });
    },
    delTable(xh) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.MrtableData.forEach((res, index) => {
            if (res.xh == xh) {
              this.MrtableData.splice(index, 1);
            }
          });
          this.tableData.forEach((res, index) => {
            if (res.xh == xh) {
              this.tableData.splice(index, 1);
            }
          });

          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    delSSTable(xh) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.MrsjglTableData.forEach((res, index) => {
            if (res.xh == xh) {
              this.MrsjglTableData.splice(index, 1);
            }
          });
          this.sjglTableData.forEach((res, index) => {
            if (res.xh == xh) {
              this.sjglTableData.splice(index, 1);
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    seachsjgl() {
      let arr = this.MrsjglTableData;
      this.sjglTableData = arr;
      if (this.sjglInput != "") {
        var reg = new RegExp(this.sjglInput);
        let arr = [];
        for (var i = 0; i < this.sjglTableData.length; i++) {
          if (reg.test(this.sjglTableData[i].name)) {
            arr.push(this.sjglTableData[i]);
          }
        }
        this.sjglTableData = arr;
      }
      this.$message({
        showClose: true,
        message: "查询成功",
        type: "success",
      });
    },
    treeFn(data, row) {
      if (row.isLeaf) {
        if (data.label == "资源") {
          this.tableData = [];
          this.MrtableData.forEach((res) => {
            console.log(res.lx);
            if (res.lx == 1) {
              this.tableData.push(res);
            }
          });
        } else {
          this.tableData = [];
          this.MrtableData.forEach((res, index) => {
            if (res.lx == 2) {
              this.tableData.push(res);
            }
          });
        }
      }
    },

    // 表格编辑、查看、删除功能点击事件
    handleEdit(index, row, num) {
      console.log(index, row, num);
      this.dataNum = row.xh;
      if (num == 0) {
        // 编辑
        this.action = "edit";
        this.showModel = true;
      }
      if (num == 1) {
        this.action = "view";
        this.showModel = true;
      }
      if (num == 2) {
        // 删除
        this.$message({
          message: "删除成功！",
          type: "success",
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
.mxgl {
  padding: 20px;
  ::v-deep .el-tabs__item {
    font-size: 20px;
  }
  ::v-deep .el-tabs__item.is-active {
    font-weight: bold;
  }
  .tree-left {
    float: left;
    width: 20%;
    .filter-tree {
      height: 800px;
      // overflow-y: scroll;
      border-left: 1px solid #ccc;
      border-right: 1px solid #ccc;
    }
  }
  .table-right {
    float: left;
    width: 80%;
    height: 100%;

    .search {
      margin-bottom: 20px;
      margin-left: 20px;
      .search-input {
        width: 300px;
      }
      .el-btn {
        margin-left: 20px;
      }
      .add-btn {
        float: right;
      }
    }
    .el-table {
      margin-left: 10px;
    }
  }
  .sjgl {
    width: 100%;
    .search {
      margin-bottom: 20px;
      margin-left: 20px;
      .search-input {
        width: 300px;
      }
      .el-btn {
        margin-left: 20px;
      }
      .add-btn {
        float: right;
      }
    }
  }
  .inp {
    display: block;
    justify-content: center;
    float: left;
    align-content: center;
    width: 45%;
  }
}
</style>
